<template>
  <el-container>
    <MyHeader>Header</MyHeader>
    <el-main id="label"></el-main>
  </el-container>
</template>

<script>
import MyHeader from '../components/MyHeader.vue';
import { getRelationData } from '@/api/services/relation';

export default {
  data() {
    return {
      chartData: {
        nodes: [],
        links: [],
      },
      label: '',
      prevIndex: '',
      oldPrevIndex: '',
      notification: '',
    };
  },
  components: {
    MyHeader,
  },
  methods: {
    highlight(index, myChart) {
      myChart.dispatchAction({
        type: "highlight",
        dataIndex: index
      })
    },

    // 非选中项取消高亮
    noneHighlight(index, myChart) {
      if (!index) return;
      myChart.dispatchAction({
        type: 'downplay',
        dataIndex: index,
      });
    },

    toPlateDetail(sid, pid){
      this.$router.push(`detail?sid=${sid}&pid=${pid}`);
    },

    // 关系图
    drawLabelChart() {
      this.label = this.$echarts.init(document.getElementById('label'));
      const that = this;
      const h = this.$createElement;

      // echarts图表的点击事件，可通过param参数确认点击的对象
      this.label.on('click', function (param) {

        const { properties, dataIndex, nodeType } = param;
        console.log(param);
        that.noneHighlight(that.oldPrevIndex, this);
        that.oldPrevIndex = dataIndex;

        that.prevIndex = dataIndex;
        console.log(dataIndex);
        // that.highlight(dataIndex, this);

        console.log(param.dataType);
        if (that.notification) {
          that.notification.close();
        }
        if (param.dataType == 'node') {
          //节点高亮
          that.highlight(dataIndex, that.label)
          // console.log(this);
          that.notification = that.$notify({
            title: param.data.name,
            message: h('p', null, [
              h('button', {
                on:{
                  click:function(){
                    that.toPlateDetail(param.data.sid, param.data.pid)
                  }
                },
                class: 'el-button el-button--primary el-button--mini is-round',
                style:'position: absolute; top: 10px; left: 4px;'
              }, [
                h('i',{class:'el-icon-share'},null)
              ]),
              h('p',null,param.data.text)
            ]),
            type: 'success',
            duration: 0,
            position: 'bottom-right',
            // showClose: false,
          });
          console.log('点击了边', param);
        } else {
          console.log(param.dataType);
        }
      });

      this.label.on("mouseout", _ => {
        if (!this.prevIndex) return
        this.highlight(this.prevIndex, this.label)
      });
      this.label.on("mouseover", _ => {
        this.label.dispatchAction({
          type: 'downplay'
        });
      });

      this.label.setOption({
        // 设置高亮颜色
        dataRange: {
          show: false,
          x: 'left',
          y: 'bottom',
          splitList: [
            { start: 5, end: 5, color: '#007aff' }, //当值为5时，区域背景
          ],
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            links: this.chartData.links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              // color: 'red', //设置线条颜色 8ab7bd
            },
            symbolSize: 80,
            roam: true, // 鼠标缩放功能
            focusNodeAdjacency: true, // 鼠标移到节点上时突出显示结点以及邻节点和边
            seriesType: 'effectScatter',

            cursor: 'pointer',
            itemStyle: {
              normal: {
                color: 'red',
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            dataZoom: {
              emphasis: {
                show: true,
                handleStyle: {
                  borderColor: '#ccc', //边框颜色
                  borderWidth: 20, //边框线宽
                },
              },
            },

            scaleLimit: {
              // 滚轮缩放的极限控制
              max: 3, // 滚轮缩放最大值
              min: 0.5, // 滚轮缩放的最小值
            },
            nodes: this.chartData.nodes,
            label: {
              show: true,
              position: 'bottom',
              distance: 10,
              fontSize: 18,
              align: 'center',
            },
            autoCurveness: 0.01, // 多条边的时候，自动计算曲率
            edgeLabel: {
              // 边的设置
              show: true,
              position: 'middle',
              fontSize: 16,
              formatter: (params) => {
                return params.data.relation;
              },
            },
            edgeSymbol: ['circle', 'arrow'], // 边两边的类型
            force: {
              repulsion: 100,
              gravity: 0.01,
              edgeLength: 220,
            },
          },
        ],
      });
    },

    // 获取关系数据
    async getRelationData() {
      const res = await getRelationData();
      console.log(res);
      if (res.status === 200) {
        for (const i in res.data.linksData) {
          this.chartData.links.push({
            source: res.data.linksData[i].name,
            target: res.data.linksData[i].target,
            relation: res.data.linksData[i].relation,
          });
        }
          console.log(res.data);
        for (const i in res.data.nodesData) {
          this.chartData.nodes.push({
            name: res.data.nodesData[i].name,
            symbol: 'image://' + res.data.nodesData[i].portrait,
            text: res.data.nodesData[i].intro,
            sid:res.data.nodesData[i].sid,
            pid:res.data.nodesData[i].pid,
          });
        }
        // }
        console.log(this.chartData.nodes);
        return this.$message.success('获取数据成功！');
      }
      this.$message.error('获取数据失败！');
    },
  },
  mounted() {},
  watch: {
    chartData: {
      deep: true,
      handler(newV, oldV) {
        this.drawLabelChart();
      },
    },
  },
  created() {
    this.getRelationData();
  },
  beforeDestroy() {
    if (this.notification) {
      this.notification.close();
    }
    console.log('bai');
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  // position: relative;
  flex-direction: column;
  height: 100vh;
  #label {
    flex: 1;
    // height: 85vh;
    // padding: 0px;
    color: wheat;
    background: url('../assets/bgImg.png') no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-size: 100%;
  }
}
</style>